<template>
  <div class="person-details">
    <ul>
      <li>姓名：{{ person.name }}</li>
      <li>年龄：{{ person.age }}</li>
      <li>性别：{{ person.gender }}</li>
      <li>专业：{{ person.major }}</li>
      <li>地址：{{ person.address }}</li>
      <li>爱好：{{ person.hobby }}</li>
      <li>成绩：{{ person.grade }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="PersonDetails">
import emitter from "@/utils/emitter";
import { reactive, toRefs } from "vue";

let person = reactive({
  name: "李华",
  age: 20,
  gender: "女",
  major: "数字媒体",
  address: "福建省 福州市 上街镇 溪源宫路 福州大学旗山校区生活区一区",
  hobby: "唱歌，跳舞",
  grade: 80,
});
//let { name, age, gender, major, address, hobby, grade } = toRefs(person);

emitter.on("sendInfo", (value: any) => {
  console.log(value);
  person.name = value[0];
  person.age = value[1];
  person.gender = value[2];
  person.major = value[3];
  person.address = value[4];
  person.hobby = value[5];
  person.grade = value[6];
  person = value;
  console.log(person);
});
</script>

<style scoped>
.person-details {
  background-color: rgb(223, 250, 250);
}
li {
  list-style-type: none;
}
</style>